/*
 * @description: 商品列表
 * @Author: along
 * @Date: 2020-04-06
 * @Last Modified by: along
 * @Last Modified time: --
 */
<template>
    <div class="container goodList">
        <!-- header -->
        <div class="header">
            <p class="header_title">商品列表</p>
            <p class="header_config" @click="configHeader()">
                <i class="iconfont icon-shezhi"></i>配置表头
            </p>
        </div>

        <!-- filter -->
        <div class="search">
            <div class="search_left">
                <div class="search_item border">
                    <el-dropdown @command="handleCommand">
                        <span class="el-dropdown-link">
                            {{ command_name }}
                            <i class="iconfont icon-zhedie1" :style="{marginLeft: '25px'}"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="商品名称">商品名称</el-dropdown-item>
                            <el-dropdown-item command="商品编号">商品编号</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <p class="search_lines"></p>
                    <el-input
                        v-if="command_name == '商品名称'"
                        v-model="formData.keyword"
                        placeholder="请输入商品名称"
                        size="medium"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                        class="search_input"
                    />
                    <el-input
                        v-if="command_name == '商品编号'"
                        v-model="formData.goods_no"
                        placeholder="请输入商品编号"
                        size="medium"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                        class="search_input"
                    />
                </div>
                <div class="search_item">
                    <p class="search_item_title">商品分类</p>
                    <el-cascader
                        v-model="formData.goods_type"
                        :options="goodsTypesList"
                        :props="{
                            value: 'no',
                            label: 'title',
                            children: 'children'
                        }"
                        expand-trigger="click"
                        clearable
                        :filterable="true"
                        class="input-unit-value"
                        size="small"
                        @change="getTableData(1)"
                        change-on-select
                        placeholder="不限"
                        separator="-"
                    />
                </div>
            </div>
            <div class="search_right">
                <div class="search_item right0">
                    <el-button
                        size="medium"
                        type="primary"
                        plain
                        :style="{width: '150px'}"
                        @click="fnImportShop()"
                    >
                        导入第三方商品
                    </el-button>
                </div>
                <div class="search_item right0">
                    <el-button
                        size="medium"
                        type="primary"
                        :style="{width: '150px'}"
                        @click="handleChangeData()"
                    >
                        添加商品
                    </el-button>
                </div>
            </div>
        </div>

        <!-- table -->
        <el-table
            v-if="tableData.length"
            :data="tableData"
            height="100%"
            class="common-table"
            style="width: calc(100% - 64px);margin-left: 32px;margin-right:32px"
            v-loading="loading"
            ref="tableDataList"
        >
            <el-table-column
                v-if="checkedOptions.a"
                :width="300"
                label="商品信息"
                header-align="left"
            >
                <template slot-scope="scope">
                    <div class="good-detail">
                        <div
                            class="cover"
                            :style="'background-image: url('+scope.row.goods_cover+')'"
                            @click="fnPrievimage(scope.row.goods_cover)"
                        />
                        <div class="detail">
                            <div class="title">
                                {{ scope.row.goods_title }}
                            </div>
                            <div class="type ellipsis">
                                商品货号: {{ scope.row.goods_number }}
                            </div>
                            <div class="type ellipsis">
                                分类: {{ scope.row.type_name }}-{{ scope.row.sub_type_name }}
                            </div>
                            <div class="no ellipsis">
                                商品ID: {{ scope.row.goods_no }}
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                v-if="checkedOptions.b"
                prop="goods_price_origin"
                label="原价"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                :width="120"
                header-align="left"
            >
                <template slot-scope="scope">
                    ¥{{ scope.row.goods_price_origin }}
                </template>
            </el-table-column>
            <el-table-column
                v-if="checkedOptions.c"
                prop="goods_price"
                label="学生价"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                :width="120"
                header-align="left"
            >
                <template slot-scope="scope">
                    ¥{{ scope.row.goods_price }}
                </template>
            </el-table-column>
            <el-table-column
                v-if="checkedOptions.d"
                prop="goods_sale"
                label="已售"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                header-align="left"
            />
            <el-table-column
                v-if="checkedOptions.e"
                label="佣金"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                header-align="left"
            >
                <template slot-scope="scope">
                    <el-button
                        slot="reference"
                        type="text"
                        @click="fnGetSpecList(scope.row)"
                    >
                        查看
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                v-if="checkedOptions.f"
                prop="freight_type"
                label="快递"
                show-overflow-tooltip
                :width="140"
                header-align="left"
            >
                <template slot-scope="scope">
                    <p
                        v-if="scope.row.freight_type == 'fix' && Number(scope.row.goods_freight) == 0"
                        style="display:flex"
                    >
                        包邮:0元
                    </p>
                    <p
                        v-else-if="scope.row.freight_type == 'weight' || scope.row.freight_type == 'num' "
                        style="display:flex"
                    >
                        模版:{{ scope.row.freight_template_name }}
                    </p>
                    <p
                        v-else-if="scope.row.freight_type == 'fix' && Number(scope.row.goods_freight) > 0 "
                        style="display:flex"
                    >
                        统一:{{ scope.row.goods_freight }}元
                    </p>
                    <p v-else>
                        --
                    </p>
                </template>
            </el-table-column>
            <el-table-column
                v-if="checkedOptions.g"
                prop="goods_status"
                :min-width="110"
                label="上架状态"
                header-align="left"
            >
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.goods_status"
                        :active-value="1"
                        :inactive-value="0"
                        :disabled="scope.row.audit_status != 1"
                        @change="fnChangeStatus(scope.row.goods_no, scope.row.goods_status)"
                    />
                </template>
            </el-table-column>
            <el-table-column
                v-if="checkedOptions.h"
                label="库存"
                header-align="left"
            >
                <template slot-scope="scope">
                    <p
                        @click="fnGetSpecShop(scope.row)"
                        class="cursor-font"
                    >
                        查看
                    </p>
                </template>
            </el-table-column>
            <el-table-column
                v-if="checkedOptions.i"
                prop="audit_status"
                :min-width="110"
                :formatter="audioStatusFormatter"
                label="审核状态"
                header-align="left"
            >
                <template slot-scope="scope">
                    <div class="task-review-status">
                        <template v-if="scope.row.audit_status == -1">
                            <el-popover
                                placement="top"
                                width="200"
                                trigger="hover"
                                :content="scope.row.audit_reason"
                                title="被驳回理由"
                                popper-class="reson-popper"
                            >
                                <span
                                    class="status deny"
                                    slot="reference"
                                >
                                    未通过<i
                                        class="iconfont icon-gantanhao-sanjiaokuang"
                                        slot="reference"
                                    />
                                </span>
                            </el-popover>
                        </template>
                        <template v-if="scope.row.audit_status == 0">
                            <span class="status wait-submit">待审核</span>
                        </template>
                        <template v-if="scope.row.audit_status == 1">
                            <span class="status completed">已通过</span>
                        </template>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                v-if="checkedOptions.j"
                prop="goods_view"
                label="浏览量"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                header-align="left"
            />
            <el-table-column
                v-if="checkedOptions.n"
                prop="goods_view_increase"
                label="昨日浏览量"
                :width="130"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                header-align="left"
            />
            <el-table-column
                v-if="checkedOptions.k"
                prop="goods_sort"
                label="排序"
                :formatter="emptyFormatter"
                header-align="left"
            />
            <el-table-column
                v-if="checkedOptions.m"
                prop="shelf_time"
                show-overflow-tooltip
                label="上架时间"
                :width="150"
                header-align="left"
            >
                <template slot-scope="scope">
                    {{ scope.row.shelf_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                </template>
            </el-table-column>
            <el-table-column
                v-if="checkedOptions.l"
                prop="expire_time"
                :width="150"
                show-overflow-tooltip
                label="失效时间"
                header-align="left"
            >
                <template slot-scope="scope">
                    {{ scope.row.expire_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                </template>
            </el-table-column>
            <el-table-column
                prop="date"
                label="操作"
                fixed="right"
                :width="125"
            >
                <template slot-scope="scope">
                    <div class="el-data-style">
                        <el-button
                            type="text"
                            class="btn-nopadding"
                            @click="handleChangeData(scope.row.goods_no)"
                        >
                            编辑
                        </el-button>
                        <el-button
                            type="text"
                            class="btn-nopadding"
                            @click="fnDelete(scope.row.goods_no)"
                        >
                            删除
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <!-- 无数据展示 -->
        <img
            v-if="!tableData.length"
            src="http://cdn.zsdx.cn/wei/images/hire/manage/market/empty-good-list.png"
            class="page_images"
            :style="{width: '500px', marginLeft: '50%', marginTop: '120px', transform: 'translate(-50%,0%)'}"
        >

        <!-- 分页 -->
        <div class="pagination-wrapper clearfixNew" v-if="tableData.length">
            <el-pagination
                background
                :current-page.sync="page.now_page"
                :page-size="page.page_size"
                layout="total, prev, pager, next, jumper"
                :total="page.total_count"
                @current-change="getTableData"
            />
        </div>

        <!-- 配置表头 -->
        <el-dialog
            title="配置列表表头"
            :visible.sync="dialogVisibleConfig"
            width="640px"
            :close-on-click-modal="false"
        >
            <div class="__el_dialog">
                <span class="__el_dialog_title">可以根据需要进行配置列表显示的字段</span>
                <el-checkbox
                    :indeterminate="isIndeterminate"
                    v-model="checkAll"
                    @change="handleCheckAllChange"
                >
                    全选
                </el-checkbox>
                <el-checkbox-group
                    v-model="checkedCities"
                    @change="handleCheckedCitiesChange"
                >
                    <el-checkbox
                        v-for="(city,i) in cities"
                        :label="city.value"
                        :key="i"
                    >
                        {{ city.label }}
                    </el-checkbox>
                </el-checkbox-group>
            </div>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    @click="dialogVisibleConfig = false"
                    size="small"
                    :style="{width: '120px', height: '36px', marginRight: '32px'}"
                >
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="configTable()"
                    :style="{width: '120px', height: '36px'}"
                >
                    确 定
                </el-button>
            </div>
        </el-dialog>

        <!-- 查看佣金 -->
        <el-dialog
            title="佣金信息"
            :visible.sync="dialogVisibleMoney"
            width="610px"
            style="max-height:800px;overflow-y:auto"
        >
            <el-table
                :data="specList"
                style="width: 100%;maxHeight:200px;overflow-y: auto;"
                border
                class="specListSpecList"
            >
                <el-table-column
                    prop="spec"
                    label="规格"
                    center
                    :formatter="emptyFormatter"
                >
                    <template slot-scope="scope">
                        {{ scope.row.spec.join() }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="money"
                    label="佣金"
                    center
                    :formatter="emptyFormatter"
                />
            </el-table>
        </el-dialog>

        <!-- 查看库存 -->
        <el-dialog
            title="库存信息"
            :visible.sync="dialogVisibleStock"
            width="610px"
            style="max-height:800px;overflow-y:auto"
        >
            <el-table
                :data="specListStock"
                style="width: 100%;maxHeight:200px;overflow-y: auto;"
                border
                class="specListStock"
            >
                <el-table-column
                    prop="spec"
                    label="规格"
                    :formatter="emptyFormatter"
                >
                    <template slot-scope="sco">
                        {{ sco.row.spec.join() }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="stock"
                    label="库存"
                    :formatter="emptyFormatter"
                />
            </el-table>
        </el-dialog>

        <!-- 添加第三方商品 -->
        <el-dialog
            title="添加第三方商品"
            :visible.sync="dialogAddShop"
            width="622px"
            :close-on-click-modal="false"
            class="zd-add-shop"
        >
            <el-form
                :model="ruleFormShop"
                ref="ruleFormShop"
                label-width="90px"
                class="demo-ruleForm"
                :label-position=" 'left' "
            >
                <p class="zd-add-shop-text">
                    注意：由于淘宝等第三方的防抓取措施，商品的价格、详情等信息，可能会缺失
                </p>
                <el-form-item
                    label="商品链接:"
                    prop="shopUrl"
                    style="margin-top: 30px"
                >
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 4, maxRows: 8}"
                        placeholder="例如: http://item.taobao.com/item.htm?id=522155891308或http://detail.tmall.com/item.htm?id=522155891308"
                        v-model="ruleFormShop.shopUrl"
                    />
                </el-form-item>
                <div class="zd-add-wrap">
                    <el-button
                        size="small"
                        type="default"
                        style="width:100px;height:32px"
                        @click="dialogAddShop = false"
                    >
                        取消
                    </el-button>
                    <el-button
                        :disabled="!ruleFormShop.shopUrl"
                        size="small"
                        type="primary"
                        style="width:100px;height:32px;margin-left:60px"
                        @click="fnAddShop()"
                    >
                        添加
                    </el-button>
                </div>
            </el-form>
        </el-dialog>

        <!-- 退货地址弹窗 -->
        <adress-dialog
            ref="adressDialog"
            @close="fnCloseAdressDialog"
        />

        <!-- 提示收款账户填写弹窗 -->
        <account-Dialog
            ref="accountDialog"
            @close="fnCloseDialog"
        />

        <!-- 图片预览 -->
        <img-preview ref="preview" />
    </div>
</template>

<script>
import { mapState } from 'vuex';
import getZdAccountInfo from '@/assets/mixin/check-info';
import getRequire from '@/assets/mixin/check-info';
import getAdress from '@/assets/mixin/check-info';
import adressDialog from '@/components/manage/market/adress-dialog';
import accountDialog from '@/components/manage/market/account-dialog';
import imgPreview from '@/components/common/img-preview';

// 表头配置参数
const configTable = {
    dialogVisibleConfig: false,
    isIndeterminate: false,
    checkAll: false,
    checkedCities: [],
    cities: [{
        value: 'a',
        label: '商品名称'
    },{
        value: 'b',
        label: '商品原价'
    },{
        value: 'c',
        label: '商品单价'
    },{
        value: 'd',
        label: '已售'
    },{
        value: 'e',
        label: '佣金'
    },{
        value: 'f',
        label: '快递'
    },{
        value: 'g',
        label: '上架状态'
    },{
        value: 'h',
        label: '库存'
    },{
        value: 'i',
        label: '审核状态'
    },{
        value: 'j',
        label: '浏览量'
    },{
        value: 'k',
        label: '排序'
    },{
        value: 'l',
        label: '失效时间'
    },{
        value: 'm',
        label: '上架时间'
    },{
        value: 'n',
        label: '昨日浏览量'
    }],
    cityOptions: ['a','b','c','d','e','f','g','h','i','j','k','l','m','n'],
    tableheader: ['a','b','c','d','e','f','g','h','i','j','k','l','m','n'],
    checkedOptions: {
        a: false, b: false, c: false, d: false, e: false, f: false, g: false, h: false, i: false, j: false, k: false, l: false, m: false, n: false
    }
};

export default {
    components: {
        adressDialog,
        accountDialog,
        imgPreview
    },
    mixins: [getZdAccountInfo, getAdress, getRequire],
    data() {
        return {
            ...configTable,
            command_name: '商品名称',//默认展示名称
            formData: {
                keyword: '',
                goods_no: '',
                goods_type: ''
            },
            goodsTypesList: [],//商品分类列表
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            tableData: [
                {
                    audit_reason: "",
                    audit_status: 1,
                    buy_limit_count: -1,
                    expire_time: 0,
                    freight_template_name: "",
                    freight_template_no: "",
                    freight_type: "fix",
                    goods_cost_price: "1.00",
                    goods_cover: "https://img.alicdn.com/bao/uploaded/i4/3173051986/O1CN01kbEjCI1QXdEpoQ7G9_!!0-item_pic.jpg",
                    goods_freight: "0.00",
                    goods_no: "go_6dfc6ab4fed3e",
                    goods_number: "1",
                    goods_price: "168.00",
                    goods_price_origin: "296.00",
                    goods_sale: 0,
                    goods_sort: 1,
                    goods_status: 1,
                    goods_title: "木林森男士夹克外套春秋季2021年新款潮流教练衫式帅气休闲装上衣",
                    goods_view: 0,
                    goods_view_increase: 0,
                    product_stock: "0",
                    shelf_time: 1617694356,
                    sub_type_name: "方便速食",
                    tuan_num: 2,
                    tuan_price: "168.00",
                    type_name: "美食"
                }
            ],
            loading: false,
            // 查看佣金
            specList: [],
            dialogVisibleMoney: false,
            // 查看库存
            specListStock: [],
            dialogVisibleStock: false,
            // 导入第三方商品
            dialogAddShop: false,
            ruleFormShop: {
                shopUrl: ''
            }
        };
    },
    filters: {
    },
    computed: {
    },
    watch: {
        ...mapState({

        })
    },
    mounted() {
        this.init();
    },
    methods: {
        /**
         * @description 初始化页面
         */
        init () {
            this.$store.commit('header/SET_HEADER',[{ title: '校园商城' }, { title: '商品列表' }]);
            this.getTableData();
            this.getGoodsTypeList();

            // test
            this.config();
        },

        /**
         * 获取表格数据
         */
        getTableData (page) {
            this.$post('', {
                page_id: page || this.page.now_page,
                goods_no: this.formData.goods_no,
                keyword: this.formData.keyword,
                type_no: (this.formData.goods_type && this.formData.goods_type.length >= 1) ? this.formData.goods_type[0] : '',
                sub_type_no: (this.formData.goods_type && this.formData.goods_type.length >= 2) ? this.formData.goods_type[1] : ''
            }, resp => {
                if (resp.code == 1) {
                    this.config();
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;

                    setTimeout(() => {
                        this.config();
                        this.$refs.tableDataList.doLayout();
                    },0);
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 获取商品分类数据
         */
        getGoodsTypeList () {
            this.$post('', {
                //
            }, resp => {
                if (resp.code == 1) {
                    this.goodsTypesList = resp.data.list;
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 切换搜索内容
         */
        handleCommand (event) {
            try {
                if(!event) return false;
                this.command_name = event;
            } catch (error) {
                console.log('error:' + error);
            }
        },

        /**
         * @description 打开导入第三方商品弹窗
         */
        fnImportShop () {
            this.getRequire().then(type => {
                // 无需验证支付账户
                if(!type) {
                    //检测退货地址
                    this.getAdress().then(el => {
                        if(!el) {
                            this.$refs.adressDialog.show();
                            return false;
                        }
                        this.dialogAddShop = !this.dialogAddShop;
                    });
                }

                // 需要验证支付账户
                if(type) {
                    //检测支付账号
                    this.getZdAccountInfo(resp => {
                        if(resp == -1) {
                            this.$refs.accountDialog.show();
                            return;
                        } else {
                            //检测退货地址
                            this.getAdress().then(el => {
                                if(!el) {
                                    this.$refs.adressDialog.show();
                                    return false;
                                }
                                this.dialogAddShop = !this.dialogAddShop;
                            });
                        }
                    });
                }
            });
        },

        /**
         * @description 导入第三方商品信息
         */
        fnAddShop () {
            location.href = `${location.protocol}//${location.host}/good-edit-group?shop_url=` + encodeURIComponent(this.ruleFormShop.shopUrl);
        },

        /**
         * @description 添加/编辑商品
         */
        handleChangeData (no = '') {
            location.href = `${location.protocol}//${location.host}/good-edit-group?no=` + no;
        },

        /**
         * @description 关闭退货地址弹窗
         */
        fnCloseAdressDialog () {
            this.$refs.adressDialog.close();
        },

        //弹窗取消
        fnCloseDialog () {
            this.$refs.accountDialog.close();
        },

        /**
         * @description 删除商品
         */
        fnDelete(no) {
            this.$confirm('确认删除该商品?', '提示', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('', { goods_no: no }, resp => {
                    if (resp.code == 1) {
                        this.$notify({
                            title: '提示',
                            message: '操作成功',
                            duration: 2000,
                            type: 'success'
                        });
                        this.fnGetData();
                    } else {
                        this.$notify({
                            title: '警告',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },


        /**
         * @description 表头全选
         */
        handleCheckAllChange(val) {
            this.checkedCities = val ? this.cityOptions : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;

            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },

        /**
         * @description 团购/配置表头
         */
        configHeader () {
            const flag = localStorage.getItem('CONFIG_HEADER');

            if(!flag) {
                this.checkedCities = this.tableheader;
            } else {
                this.checkedCities = JSON.parse(flag);
            }

            this.dialogVisibleConfig = !this.dialogVisibleConfig;
        },

        /**
         * @description 团购/获取表头配置
         */
        config () {
            const flag = localStorage.getItem('CONFIG_HEADER');
            const list = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n'];

            if(!flag) {
                this.tableheader = this.cityOptions;
            } else {
                this.tableheader = JSON.parse(flag);
            }

            this.tableheader.forEach(element => {
                if(this.tableheader.includes(element)) {
                    this.$set(this.checkedOptions, element, true);
                }
            });

            if(this.tableheader.length < 14) {
                let a = new Set(list);
                let b = new Set(this.tableheader);

                let intersect = new Set([...a].filter(x => !b.has(x)));

                intersect.forEach(option => {
                    this.$set(this.checkedOptions, option, false);
                });
            }
        },

        /**
         * @description 团购/确定配置表头
         */
        configTable () {
            localStorage.setItem('CONFIG_HEADER', JSON.stringify(this.checkedCities));
            this.$notify({
                title: '提示',
                message: '配置成功',
                type: 'success',
                duration: 2000
            });
            this.getTableData();
            this.dialogVisibleConfig = !this.dialogVisibleConfig;
        },

        /**
         * @description 设置上下架状态
         */
        fnChangeStatus(no, status) {
            this.$post('', {
                goods_no: no,
                goods_status: status
            }, resp => {
                if (resp.code == 1) {
                    this.$notify({
                        title: '提示',
                        message: '状态修改成功',
                        duration: 2000,
                        type: 'success'
                    });
                    this.getTableData();
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },


        /**
         * @description 查看秒杀佣金
         */
        fnGetSpecList (row) {
            this.$post('', {
                goods_no: row.goods_no
            }, resp => {
                if(resp.code == 1){
                    let spec = resp.data.goods_product_list;
                    let list = [];

                    spec.map(item => {
                        let value = '';

                        if (typeof(item.spec_list) == 'object') {
                            value = item.spec_list.map(option => {
                                return option.spec_name + ':' + option.spec_value;
                            });
                        }

                        list.push({
                            spec: value,
                            money: item.product_commission
                        });
                    });

                    this.specList = list;
                    this.dialogVisibleMoney = !this.dialogVisibleMoney;
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * @description 查看库存
         */
        fnGetSpecShop(row){
            this.$post('', {
                goods_no: row.goods_no
            }, resp => {
                if(resp.code == 1){
                    let spec = resp.data.goods_product_list;
                    let list = [];

                    spec.map(item => {
                        let value = '';

                        if (typeof(item.spec_list) == 'object') {
                            value = item.spec_list.map(option => {
                                return option.spec_name + ':' + option.spec_value;
                            });
                        }

                        list.push({
                            spec: value,
                            stock: item.product_stock
                        });
                    });

                    this.specListStock = list;
                    this.dialogVisibleStock = !this.dialogVisibleStock;
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * @description 拼团，状态过滤
         */
        audioStatusFormatter(column, row, value) {
            switch (value) {
                case 0:
                    return '待审核';
                case 1:
                    return '审核通过';
                case 2:
                    return '审核通过';
                default:
                    return '未知';
            }
        },

        /**
         * @description: 预览图片
         */
        fnPrievimage (images, index) {
            if(images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$notify({
                    title: '提示',
                    message: '图片类型错误',
                    type: 'warning',
                    duration: 2000
                });
            }
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    },
};
</script>

<style lang="less">
.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #ffffff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .header {
        width: 100%;
        height: 58px;
        box-sizing: border-box;
        border-bottom: 1px rgba(235, 238, 245, 1) solid;
        padding: 0 32px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .header_title {
            color: rgba(51, 51, 51, 1);
            font-size: 18px;
            font-weight: 500;
        }
        .header_config {
            display: flex;
            align-items: center;
            color: rgba(32, 160, 255, 1);
            font-size: 14px;
            cursor: pointer;
            .icon-shezhi {
                color: rgba(32, 160, 255, 1);
                font-size: 14px;
                margin-right: 5px;
            }
        }
    }
    .search {
        width: calc(100% - 64px);
        display: flex;
        flex-wrap: wrap;
        margin: 0 32px;
        margin-bottom: 24px;
        justify-content: space-between;
        .search_left, .search_right {
            display: flex;
            align-items: center;
        }
        .search_item {
            margin-top: 24px;
            height: 36px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            border-radius: 4px;
            padding-left: 23px;
            cursor: pointer;
            margin-right: 9px;
            .search_lines {
                width: 1px;
                height: 14px;
                background-color: rgba(153, 153, 153, 1);
                margin: 0 16px 0 13px;
            }
            .search_item_title {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                margin-right: 10px;
            }
        }
        .border {
            border: 1px rgba(194, 194, 194, 1) solid;
        }
        .right0 {
            margin-right: 0px;
        }
    }
    .good-detail {
        display: flex;
        align-items: center;
        .cover {
            flex-shrink: 0;
            flex-grow: 0;
            width: 108px;
            height: 108px;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            margin-right: 16px;
            cursor: pointer;
        }
        .detail {
            width: 186px;
            .title {
                font-size: 12px;
                color: rgba(51, 51, 51, 1);
                line-height: 17px;
                letter-spacing: 1px;
                overflow : hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                margin-bottom: 8px;
            }
            .no {
                font-size: 12px;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                line-height: 17px;
                margin-top: 8px;
            }
            .type {
                font-size: 12px;
                font-weight: 400;
                color: rgba(96, 105, 114, 1);
                line-height: 17px;
                margin-top: 7px;
            }
        }
    }
    .ellipsis {
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .task-review-status {
        .status {
            position: relative;
            display: inline-block;
            padding-left: 14px;
            &::before {
                content: "";
                position: absolute;
                top: 50%;
                left: 0;
                transform: translate(0, -50%);
                width: 6px;
                height: 6px;
                border-radius: 50%;
            }
            &.wait-submit,
            &.wait-audit {
                &::before {
                background-color: #f5a623;
                }
            }
            &.deny {
                .icon-gantanhao-sanjiaokuang{
                    color: #88909C;
                }
                &::before {
                background-color: #ff0019;
                }
            }
            &.completed {
                &::before {
                background-color: #00c800;
                }
            }
        }
    }
    .__el_dialog {
        width: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        .__el_dialog_title {
            color: #17A298;
            font-size: 12px;
        }
    }
    .dialog-footer {
        display: flex;
        justify-content: center;
        margin-bottom: 5px;
    }
    .zd-add-shop {
        .zd-add-shop-text {
            font-size: 14px;
            color: #F8A127;
            letter-spacing: 0;
            white-space: nowrap;
            margin-top: 4px;
        }
        .zd-add-wrap {
            width: 100%;
            display: flex;
            justify-content: center;
            height: 32px;
            align-items: center;
        }
    }
    .pagination-wrapper {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 32px;
        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }
}
</style>

<style lang="less">
.goodList {
    .el-dropdown {
        white-space: nowrap;
    }
    .search_input {
        .el-input__inner {
            width: 260px;
            border: none;
            height: 34px;
        }
    }
    .__el_dialog {
        .el-checkbox {
            margin-top: 24px;
        }
        .el-checkbox-group {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            .el-checkbox {
                margin-top: 24px;
                margin-right: 0px;
                width: calc(100% / 3);
            }
        }
    }
    .el-dialog__body {
        padding-left: 58px;
        padding-right: 58px;
    }

    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
}
.cursor-font {
    color: #409EFF;
    cursor: pointer;
}

.clearfixNew {
    .btn-prev, .btn-next {
        background-color: transparent !important;
    }
    .el-pager .active {
        background-color: transparent !important;
        color: #20A0FF !important;
    }
    .el-pager .number {
        background-color: transparent !important;
        color: #606266;
    }
    .el-pagination__jump {
        margin-left: 20px;
    }
}
</style>